<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps, AccountOption } from "./utils/types";

interface Props extends FormProps {
  accountOptions?: AccountOption[];
}

const props = withDefaults(defineProps<Props>(), {
  formInline: () => ({
    account_id: "",
    amount: ""
  }),
  accountOptions: () => []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <re-col :span="24">
        <el-form-item label="广告账号" prop="account_id">
          <el-select
            v-model="newFormInline.account_id"
            class="w-full"
            placeholder="请选择广告账号"
            filterable
            clearable
          >
            <el-option
              v-for="option in props.accountOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </re-col>

      <re-col :span="24">
        <el-form-item label="充值金额" prop="amount">
          <el-input-number
            v-model="newFormInline.amount"
            class="w-full"
            :min="0.01"
            :max="999999999.99"
            :precision="2"
            controls-position="right"
            placeholder="请输入充值金额"
          />
<!--          <div class="text-sm text-gray-500 mt-1">-->
<!--            最小金额：$0.01，最大金额：$999,999,999.99-->
<!--          </div>-->
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style scoped>
.w-full {
  width: 100%;
}
</style>
